import VXETable from 'vxe-table'
import dayjs from 'dayjs'
import isBetween from 'dayjs/plugin/isBetween'
dayjs.extend(isBetween)

import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

const Bem = createBem(`${tableNamespace}__filter-date`)

VXETable.renderer.add('Date', {
  renderFilter(h, renderOpts, { column, $panel }) {
    const { options = {} } = renderOpts
    const filters = column.filters[0]

    function handleChange(value) {
      filters.data = value
      $panel.changeOption(null, !!filters.data, filters)
    }

    return [
      <div class={Bem()}>
        <el-date-picker
          size={this.$store.getters.size}
          value={filters.data}
          defaultTime={['00:00:00', '23:59:59']}
          type="datetimerange"
          rangeSeparator="至"
          startPlaceholder="开始日期"
          endPlaceholder="结束日期"
          props={options}
          onInput={handleChange}
        />
      </div>
    ]
  },
  filterMethod(params) {
    const { option, row, column } = params
    const { data } = option
    const cellValue = row[column.property]

    if (data && cellValue) {
      return dayjs(cellValue).isBetween(
        dayjs(data[0]),
        dayjs(data[1]),
        null,
        '[]'
      )
    }

    return false
  }
})
